{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '选择示例3'])}
<style>
    .badge-outline-default::before {
        background-color: #f5f6f7;
    }
    
    .list-chose span {
        cursor: pointer;
        background-color: #fff;
        padding-right: 16px;
        -webkit-transition: .2s linear;
        transition: .2s linear
    }
    .list-chose span input {
        display: none;
    }
    .list-chose span:hover,
    .list-chose span.active {
        border-color: var(--bs-primary);
    }
    .list-chose span.active:after {
        font-family: 'Material Design Icons';
        content: "\F012C";
        width: 14px;
        height: 14px;
        display: inline-block;
        -wekit-border-radius: 0 0 0 14px;
        border-radius: 0 0 0 14px;
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: var(--bs-primary);
        color: #fff;
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
        
          <div class="mb-3">
          <p class="list-chose">
            <span class="badge badge-outline-default active"><input type="radio" name="deploy" value="1" checked />官方配置一</span>
            <span class="badge badge-outline-default"><input type="radio" name="deploy" value="2" />官方配置二</span>
            <span class="badge badge-outline-default"><input type="radio" name="deploy" value="3" />官方配置三</span>
          </p>
        </div>
        
        <button class="btn btn-default" id="getChose">获取选中值</button>
        <pre class="mt-3" id="console"></pre>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('click', '.list-chose span', function() {
            $(this).addClass('active').siblings().removeClass('active');
            $(this).siblings().find('input').prop('checked', 0);
            $(this).find('input').prop('checked', 1);
        });
        
        $('#getChose').on('click', function() {
            var deploy = $('input[name="deploy"]:checked').val();
            if ((typeof(deploy) =='undefined')) {
                deploy = '您未选择配置';
            }
            $('#console').html('你选中的配置是：' + deploy + '\n');
        });
    });
    </script>